<template>
	<view>
		<u-navbar   title="朋友圈" title-color="#F09238">
			<view class="slot-wrap" @click="torelease">
				<u-icon name="camera-fill" color="#F09238" size="40"></u-icon>
			</view>
		</u-navbar>
		<view class="content" >
			<view class="item" v-for="(item,index) in list">
				<view class="i_l" @click="toinfo">
					<image :src="item.headImg" mode="aspectFill" class="u_img"></image>
				</view>
				<view class="i_r">
					<view class="i_r_t">
						<view class="name">{{item.userName | text}}</view>
						<view class="sixin" v-if="id!=item.userId" @click="chat(item.userId,item.userName)">私信</view>
					</view>
					<view class="con">{{item.articleContent}}</view>
					<view class="img_box" v-if="item.imageUrl!=''">
						<image :src="it" mode="aspectFill" class="p_img" v-for="(it,i) in item.imageUrl.split(',')" @click="lookimg(it,item.imageUrl.split(','))"></image>
					</view>
					<view class="zan">
						<view style="display: flex;align-items: center;">
							<u-icon name="thumb-up-fill" color="#999" size="40" v-if="item.flag==false"  @click="zan(item,true,item.socialCircleId)"> ></u-icon>
							<u-icon name="thumb-up-fill" color="#F09238" size="40" v-if="item.flag==true" @click="zan(item,false,item.socialCircleId)"></u-icon>
							<view class="num">{{item.likeNum}}</view>
						</view>
						<view class="time">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{pyqlist,zan}from"../../api/user.js"
	export default{
		data(){
			return{
				color:"#999999",//#F09238
				num:1,
				list:[],
				id:null
			}
		},
		filters:{
			text(val){
				if(val==null){
					return "昵称未设置"
				}else{
					return val
				}
			}
		},
		onLoad() {
			this.id=uni.getStorageSync('userInfo').userId
		},
		onShow() {
			this.list=[]
			this.num=1
			this.getlist()
		},
		onReachBottom() {
			this.getlist()
		},
		methods:{
			async getlist(){
				uni.showLoading({
					title:"加载中..."
				})
				let res=await this.get(pyqlist,{pageSize:10,pageNum:this.num})
				this.num++
				this.list=[...this.list,...res.data]
			},
			toinfo(){
				uni.navigateTo({
					url:"./friendsInfo"
				})
			},
			torelease(){
				uni.navigateTo({
					url:"./release"
				})
			},
			lookimg(it,arr){
				uni.previewImage({
					current:it,
					urls:arr
				})
			},
			async zan(item,flag,id){
				let res=await this.post(zan,{socialCircleId:id,flag:flag})
				item.flag=flag
				if(flag){
					item.likeNum++
				}else{
					item.likeNum--
				}
			},
			chat(id,n){
				let name=n
				if(name==null){
					name="昵称未设置"
				}
				uni.navigateTo({
					url:"./chatdetails?id="+id+"&name="+name
				})
			}
		}
	}
</script>

<style>
	.sixin{
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		color: #E6852C;
		border: 1px #E6852C solid;
	}
	.num{
		margin-left: 20rpx;
		position: relative;
		top: 4rpx;
	}
	.zan{
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.p_img{
		width: 180rpx;
		height: 180rpx;
		display: block;
		margin: 10rpx 10rpx 0 0;
	}
	.img_box{
		width: 570rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.con{
		font-size: 24rpx;
		line-height: 30rpx;
		color: #666666;
		opacity: 1;
		margin-top: 16rpx;
	}
	.time{
		font-size: 22rpx;
		font-weight: 300;
		color: #666666;
		opacity: 1;
	}
	.name{
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
		color: #F09238;
		opacity: 1;
	}
	.i_r_t{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 560rpx;
		height: 60rpx;
	}
	.i_r{
		width:560rpx ;
		padding: 30rpx 0 0 ;
	}
	.item{
		width: 690rpx;
		display: flex;
		border-bottom: 1px rgba(0,0,0,0.1) solid;
		padding-bottom: 30rpx;
	}
	.i_l{
		width: 130rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}
	.u_img{
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
	}
	.content{
		padding: 0 30rpx 40rpx;
		box-sizing: border-box;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		box-sizing: border-box;
		padding-right: 30rpx;
	}
</style>
